<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/header.css" rel="stylesheet" />
		<link href="iconfont/iconfont.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();

			mui.plusReady(function() {
				plus.navigator.setStatusBarBackground("hotpink");
				plus.navigator.setStatusBarStyle("light");
			});
		</script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav title">
			<h1 class="mui-title title-color">梦聊</h1>
		</header>

		<nav class="mui-bar mui-bar-tab index-tab">
			<a class="mui-tab-item mui-active" tabIndex="0">
				<span class="mui-icon iconfont iconweixin"></span>
				<span class="mui-tab-label">梦聊</span>
			</a>
			<a class="mui-tab-item" tabIndex="1">
				<span class="mui-icon iconfont iconweimingmingwenjianjia_tongxunlu"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" tabIndex="2">
				<span class="mui-icon iconfont iconfaxian"></span>
				<span class="mui-tab-label">发现</span>
			</a>
			<a class="mui-tab-item" tabIndex="3">
				<span class="mui-icon iconfont iconwo"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>
		
		<script type="text/javascript" charset="utf-8">
			var webviewArray = [
				{pageId: "chat", pageUrl: "chat.html"},
				{pageId: "contacts", pageUrl: "contacts.html"},
				{pageId: "discovery", pageUrl: "discovery.html"},
				{pageId: "me", pageUrl: "me.html"}
			];
			
			var webviewStyle = {
				top: "44px",
				bottom: "50px"
			};
			
			mui.plusReady(function () {
				
				// 禁用回退按钮
				mui.back = function() {
					return false;
				}
				//获取当前webview对象
			    var currentWebview = plus.webview.currentWebview();
				//向当前主页的webview中追加4个子webview
				for (var i = 0; i < webviewArray.length; i++) {
					//创建webview
					var create_webview = plus.webview.create(webviewArray[i].pageUrl,
					                               webviewArray[i].pageId,
					                               webviewStyle);
					//隐藏webview
					create_webview.hide();
					//追加子webview到主webview
					currentWebview.append(create_webview);
				}
				//默认展示chat这个webview
				plus.webview.show(webviewArray[0].pageId);
			});
			
			//添加点击事件用于跳转不同的页面
			mui(".mui-bar-tab").on("tap", "a", function(e){
				var tabIndex = this.getAttribute("tabIndex");
				//展示相关webview
				plus.webview.show(webviewArray[tabIndex].pageId, "slide-in-right", 200);
				//隐藏其他webview
				for (var i = 0; i < webviewArray.length; i++) {
					if(i != tabIndex){
						//隐藏webview
						plus.webview.hide(webviewArray[i].pageId, "slide-in-right", 200);
					}
				}
				//防止默认时间，防止默认表单提交
				e.preventDefault();
			});
		</script>
	</body>
</html>